<template>
  <div class="map-right-list-wrapper">
    <div class="list-top">{{ total }}个园区</div>

    <div class="list-ul webkit-scrollbar">
      <ParkListItem v-for="item in dataList" :key="item.id" :data-obj="item" />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import ParkListItem from '@/components/index/industryMap/MapRightListPark/ParkListItem.vue'
import { getParkPageList } from '@/api/park'
export default Vue.extend({
  components: { ParkListItem },
  data() {
    return {
      total: 0,
      dataList: [],
    }
  },
  computed: {
    ...mapGetters('industryMap', ['areaCode', 'areaName']),
  },
  watch: {
    areaName(name) {
      console.log('%c [ name ]-29', 'font-size:13px; background:pink; color:#bf2c9f;', name)
      this.fetchData()
    },
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      // const {} = opts
      const params = {
        conditions: {},
        sort: { 'data.sort': -1 },
      }

      if (this.areaName && this.areaName !== '重庆市') {
        params.conditions['data.count'] = this.areaName
      }

      const result = await getParkPageList(params)

      this.total = result.length
      this.dataList = result
    },
  },
})
</script>
<style lang="scss" scoped>
.map-right-list-wrapper {
  background-color: rgba(224, 228, 237, 0.2);
  height: calc(100% - 208px);

  .list-top {
    font-weight: bold;
    font-size: 14px;
    color: #898faa;
    padding: 15px;
  }

  .list-ul {
    height: calc(100% - 45px);
    margin-top: -15px;
    overflow-y: auto;
  }
}
</style>
